<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<style type="text/css">
    .reply {
        color: teal !important;
        font-weight: bold !important;
    }
</style>
<body>
<th:block th:if="${articalId} != -1"><h3 class="ui dividing header">评论区</h3></th:block>

<div class="ui comments">
    <div class="comment" th:each="message:${messages}">
        <div class="avatar">
            <img th:src="'/style/images/system/'+${message.get('prophoto')}">
        </div>
        <div class="content">
            <a class="author" th:text="${message.get('nickname')}"></a>
            <div class="metadata">
                <i class="time icon"></i><span class="date" th:text="${message.get('messageTime')}"></span>
            </div>
            <div class="text" th:text="${message.get('content')}"></div>
            <div class="actions">
                <a class="reply btn-reply" th:id="${message.get('id')}">回复</a>
            </div>
        </div>
        <div class="comments" th:each="messagereply : ${message.get('messagereplys')}">
            <div class="comment">
                <div class="avatar">
                    <img th:src="'/style/images/system/'+${messagereply.get('prophoto')}">
                </div>
                <div class="content">
                    <a class="author" th:text="${messagereply.get('fromusername')}"></a>
                    回复
                    <a class="author" th:text="${messagereply.get('tousername')}"></a>
                    <div class="metadata">
                        <i class="time icon"></i><span class="date" th:text="${messagereply.get('replytime')}"></span>
                    </div>
                    <div class="text" th:text="${messagereply.get('content')}"></div>
                    <div class="actions">
                        <a class="reply btn-reply-sub" th:id="${messagereply.get('id')}">回复</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--分页-->
<div class="ui middle aligned one column grid">
    <div class="center aligned column">
        <div id="pageinfo"></div>
    </div>
</div>
<!--分页结束-->

<script>
    /*<![CDATA[*/
    var aid = [[${articalId}]];
    var pageCount = [[${pageInfo.total}]];//数量
    var pageNum = [[${pageInfo.pageNum}]];//当前页
    var pageSize = [[${pageInfo.pageSize}]];//每页显示数量
    /*]]>*/

    layui.config({
        base: ''
    }).use(['laypage', 'layer'], function () {
        laypage = layui.laypage, layer = layui.layer;
        laypage.render({
            elem: 'pageinfo'
            , count: pageCount             //数据总数
            , limit: pageSize                      //每页显示条数
            , curr: pageNum                        //起始页
            , groups: 5                      //连续页码个数

            //跳转页码时调用
            , jump: function (obj, first) { //obj为当前页的属性和方法，第一次加载first为true
                //do something
                if (!first) {
                    //非首次加载 do something
                    var page = obj.curr;
                    url = "/message/view?aid=" + aid + "&pageIndex=" + page;
                    $('#message-container').load(url);
                }
            }
        });
    })
</script>
<script type="text/javascript" th:inline="javascript">
    var aid = [[${articalId}]];
    $(".btn-reply").click(function (e) {
        var user = [[${session.userinfo}]];
        if (user == null) {
            layer.msg("请先登录！", {icon: 2});
            return;
        }
        var messageId = $(e.target).attr("id");
        $(".replycontainer").remove();
        $(".replycontainer_sub").remove();
        $(this).parent().append(
            "<div class='replycontainer'>" +
            "   <div class='layui-form-item'>" +
            "       <input type='text' class='layui-input' name='replyId' id='replyId' hidden>" +
            "       <textarea name='replyContent' id='replyContent' placeholder='请输入回复内容' class='layui-textarea' style='min-height:80px;' lay-verify='required'></textarea>" +
            "   </div>" +
            "   <div class='layui-form-item'>" +
            "       <input type='button' class='layui-btn layui-btn-sm' onclick='submitReply()' value='提交'></input>" +
            "   </div>" +
            "</div>");
        if (messageId != undefined) {
            $('#replyId').val(messageId);
        }
    });

    function submitReply() {
        var replyId = $('#replyId').val();
        var replyContent = $('#replyContent').val();
        if (replyId == '' || replyId == null) {
            layer.msg("操作失败！", {icon: 2});
            return;
        }
        if (replyContent == '' || replyContent == null) {
            layer.msg("请输入回复内容！", {icon: 7});

        } else {
            $.ajax({
                type: "post",
                url: "/message/reply",
                dataType: "json",
                data: {
                    "replyId": replyId,
                    "replyContent": replyContent
                },
                success: function (result) {
                    if (result.flag == "success") {
                        $(".replycontainer").remove();
                        layer.msg("回复成功！", {icon: 1});
                        $('#message-container').load('/message/view?aid=' + aid);
                    } else {
                        layer.msg("回复失败！", {icon: 2});
                    }
                }, error: function () {
                    layer.msg("回复失败！", {icon: 2});
                }
            });
        }
    }


    $(".btn-reply-sub").click(function (e) {
        var user = [[${session.userinfo}]];
        if (user == null) {
            layer.msg("请先登录！", {icon: 2});
            return;
        }
        var messageId = $(e.target).attr("id");
        $(".replycontainer").remove();
        $(".replycontainer_sub").remove();
        $(this).parent().append(
            "<div class='replycontainer_sub'>" +
            "   <div class='layui-form-item'>" +
            "       <input type='text' class='layui-input' name='replyId' id='replyId' hidden>" +
            "       <textarea name='replyContent' id='replyContent' placeholder='请输入回复内容' class='layui-textarea' style='min-height:80px;' lay-verify='required'></textarea>" +
            "   </div>" +
            "   <div class='layui-form-item'>" +
            "       <input type='button' class='layui-btn layui-btn-sm' onclick='submitReplySub()' value='提交'></input>" +
            "   </div>" +
            "</div>");
        if (messageId != undefined) {
            $('#replyId').val(messageId);
        }
    });

    function submitReplySub() {
        var replyId = $('#replyId').val();
        var replyContent = $('#replyContent').val();
        if (replyId == '' || replyId == null) {
            layer.msg("操作失败！", {icon: 2});
            return;
        }
        if (replyContent == '' || replyContent == null) {
            layer.msg("请输入回复内容！", {icon: 7});
        } else {
            $.ajax({
                type: "post",
                url: "/messagereply/reply",
                dataType: "json",
                data: {
                    "replyId": replyId,
                    "replyContent": replyContent
                },
                success: function (result) {
                    if (result.flag == "success") {
                        $(".replycontainer").remove();
                        layer.msg("回复成功！", {icon: 1});
                        $('#message-container').load('/message/view?aid=' + aid);
                    } else {
                        layer.msg("回复失败！", {icon: 2});
                    }
                }, error: function () {
                    layer.msg("回复失败！", {icon: 2});
                }
            });
        }
    }
</script>
</body>
</html>
